<template>
  <div :id="uploaderId" class="uploader">
    <div class="queueList">
      <div id="dndArea" class="placeholder">
        <div :id="filePickerId"></div>
        <p>或将图片拖到这里，单次最多可选300张</p>
      </div>
    </div>
    <div class="statusBar" style="display:none;">
      <div class="progress">
        <span class="text">0%</span>
        <span class="percentage"></span>
      </div>
      <div class="info"></div>
      <div class="btns">
        <div :id="filePicker2Id"></div>
        <div class="uploadBtn">开始上传</div>
      </div>
    </div>
  </div>
</template>
<script>
// import ElUploadSortable from "el-upload-sortable";
import {
  fetchUploadGroup,
  uploadSubmit,
  getUploadList,
  getUploadToken
} from '../../api/sys'
import { API_BASE_URL } from '@/config'
import { getToken, removeToken } from '@/utils/auth'

export default {
  name: 'pic-upload-do',
  props: {
    formData: Object
  },
  components: {
    // ElUploadSortable
  },
  watch: {
    formData: {
      immediate: true,
      handler(val) {
        if (val && val.code && val.code != this.group) {
          this.group = val.code;
          console.log(val)

          this.initUploader();
        }
        // console.log("aaa");
      }
    }
  },
  data() {
    return {
      token: "",
      uploader: null,
      uploaderId: "uploader",
      filePickerId: "filePicker",
      filePicker2Id: "filePicker2",
      group: "default",
    }
  },
  created() {
    this.ext = Math.random().toString(36).substr(2, 9);
    this.uploaderId = "uploader" + this.ext;
    this.filePickerId = "filePicker" + this.ext;
    this.filePicker2Id = "filePicker2" + this.ext;
    this.token = getToken();

    setTimeout(() => {
      this.initUploader();
    }, 500);
  },
  methods: {
    initUploader() {
      var vm = this;
      var $wrap = $('#' + this.uploaderId);
      var $queue = $('<ul class="filelist"></ul>')
        .appendTo($wrap.find('.queueList'));
      var $statusBar = $wrap.find('.statusBar');
      var $info = $statusBar.find('.info');
      var $upload = $wrap.find('.uploadBtn');
      var $placeHolder = $wrap.find('.placeholder');
      var $progress = $statusBar.find('.progress').hide();
      var fileCount = 0;
      var fileSize = 0;
      var ratio = window.devicePixelRatio || 1;
      var thumbnailWidth = 110 * ratio;
      var thumbnailHeight = 110 * ratio;
      var state = 'pedding';
      var percentages = {};
      var supportTransition = (function () {
        var s = document.createElement('p').style,
          r = 'transition' in s ||
            'WebkitTransition' in s ||
            'MozTransition' in s ||
            'msTransition' in s ||
            'OTransition' in s;
        s = null;
        return r;
      })();
      if (!WebUploader.Uploader.support()) {
        alert('Web Uploader 不支持您的浏览器！如果你使用的是IE浏览器，请尝试升级 flash 播放器');
        throw new Error('WebUploader does not support the browser you are using.');
      }
      let formData = {
        "mediaType": "image"
      };
      var uploader = WebUploader.create({
        pick: {
          id: '#' + vm.filePickerId,
          label: '点击选择图片'
        },
        formData: $.extend(formData, { 'group': this.group }),
        dnd: '#' + this.uploaderId + ' .queueList',
        paste: document.body,

        accept: {
          title: 'Images',
          extensions: 'gif,jpg,jpeg,bmp,png,jpeg',
          mimeTypes: 'image/*'
        },

        // swf文件路径
        swf: "<%= BASE_URL %>webuploader/Uploader.swf",

        disableGlobalDnd: true,
        duplicate: true,

        chunked: false,
        threads: 1,
        server: API_BASE_URL + "pms/files/upload",
        fileNumLimit: 300,
        fileSizeLimit: 300 * 1024 * 1024,    // 200 M
        fileSingleSizeLimit: 200 * 1024 * 1024    // 50 M
      });

      uploader.addButton({
        id: '#' + vm.filePicker2Id,
        label: '继续添加'
      });

      function addFile(file) {
        var $li = $('<li id="' + file.id + '">' +
          '<p class="title">' + file.name + '</p>' +
          '<p class="imgWrap"></p>' +
          '<p class="progress"><span></span></p>' +
          '</li>'),

          $btns = $('<div class="file-panel">' +
            '<span class="cancel">删除</span>' +
            '<span class="rotateRight">向右旋转</span>' +
            '<span class="rotateLeft">向左旋转</span></div>').appendTo($li),
          $prgress = $li.find('p.progress span'),
          $wrap = $li.find('p.imgWrap'),
          $info = $('<p class="error"></p>'),

          showError = function (code) {
            switch (code) {
              case 'exceed_size':
                text = '文件大小超出';
                break;

              case 'interrupt':
                text = '上传暂停';
                break;

              default:
                text = '上传失败，请重试';
                break;
            }

            $info.text(text).appendTo($li);
          };

        if (file.getStatus() === 'invalid') {
          showError(file.statusText);
        } else {
          // @todo  lazyload
          $wrap.text('预览中');
          uploader.makeThumb(file, function (error, src) {
            if (error) {
              $wrap.text('不能预览');
              return;
            }

            var img = $('<img src="' + src + '">');
            $wrap.empty().append(img);
          }, thumbnailWidth, thumbnailHeight);

          percentages[file.id] = [file.size, 0];
          file.rotation = 0;
        }

        file.on('statuschange', function (cur, prev) {
          if (prev === 'progress') {
            $prgress.hide().width(0);
          } else if (prev === 'queued') {
            $li.off('mouseenter mouseleave');
            $btns.remove();
          }

          // 成功
          if (cur === 'error' || cur === 'invalid') {
            console.log(file.statusText);
            showError(file.statusText);
            percentages[file.id][1] = 1;
          } else if (cur === 'interrupt') {
            showError('interrupt');
          } else if (cur === 'queued') {
            percentages[file.id][1] = 0;
          } else if (cur === 'progress') {
            $info.remove();
            $prgress.css('display', 'block');
          } else if (cur === 'complete') {
            $li.append('<span class="success"></span>');
          }

          $li.removeClass('state-' + prev).addClass('state-' + cur);
        });

        $li.on('mouseenter', function () {
          $btns.stop().animate({ height: 30 });
        });

        $li.on('mouseleave', function () {
          $btns.stop().animate({ height: 0 });
        });

        $btns.on('click', 'span', function () {
          var index = $(this).index(),
            deg;

          switch (index) {
            case 0:
              uploader.removeFile(file);
              return;

            case 1:
              file.rotation += 90;
              break;

            case 2:
              file.rotation -= 90;
              break;
          }

          if (supportTransition) {
            deg = 'rotate(' + file.rotation + 'deg)';
            $wrap.css({
              '-webkit-transform': deg,
              '-mos-transform': deg,
              '-o-transform': deg,
              'transform': deg
            });
          } else {
            $wrap.css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + (~~((file.rotation / 90) % 4 + 4) % 4) + ')');
            // use jquery animate to rotation
            // $({
            //     rotation: rotation
            // }).animate({
            //     rotation: file.rotation
            // }, {
            //     easing: 'linear',
            //     step: function( now ) {
            //         now = now * Math.PI / 180;

            //         var cos = Math.cos( now ),
            //             sin = Math.sin( now );

            //         $wrap.css( 'filter', "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + ",M12=" + (-sin) + ",M21=" + sin + ",M22=" + cos + ",SizingMethod='auto expand')");
            //     }
            // });
          }


        });

        $li.appendTo($queue);
      }

      function removeFile(file) {
        var $li = $('#' + file.id);

        delete percentages[file.id];
        updateTotalProgress();
        $li.off().find('.file-panel').off().end().remove();
      }

      function updateTotalProgress() {
        var loaded = 0,
          total = 0,
          spans = $progress.children(),
          percent;

        $.each(percentages, function (k, v) {
          total += v[0];
          loaded += v[0] * v[1];
        });

        percent = total ? loaded / total : 0;

        spans.eq(0).text(Math.round(percent * 100) + '%');
        spans.eq(1).css('width', Math.round(percent * 100) + '%');
        updateStatus();
      }

      function updateStatus() {
        var text = '', stats;

        if (state === 'ready') {
          text = '选中' + fileCount + '张图片，共' +
            WebUploader.formatSize(fileSize) + '。';
        } else if (state === 'confirm') {
          stats = uploader.getStats();
          if (stats.uploadFailNum) {
            text = '已成功上传' + stats.successNum + '张图片，' +
              stats.uploadFailNum + '张图片上传失败，<a class="retry" href="#">重新上传</a>失败图片或<a class="ignore" href="#">忽略</a>'
          }

        } else {
          stats = uploader.getStats();
          text = '共' + fileCount + '张（' +
            WebUploader.formatSize(fileSize) +
            '），已上传' + stats.successNum + '张';

          if (stats.uploadFailNum) {
            text += '，失败' + stats.uploadFailNum + '张';
          }
        }

        $info.html(text);
      }

      function setState(val) {
        var file, stats;

        if (val === state) {
          return;
        }

        $upload.removeClass('state-' + state);
        $upload.addClass('state-' + val);
        state = val;

        switch (state) {
          case 'pedding':
            $placeHolder.removeClass('element-invisible');
            $queue.parent().removeClass('filled');
            $queue.hide();
            $statusBar.addClass('element-invisible');
            uploader.refresh();
            break;

          case 'ready':
            $placeHolder.addClass('element-invisible');
            $('#' + vm.filePicker2Id).removeClass('element-invisible');
            $queue.parent().addClass('filled');
            $queue.show();
            $statusBar.removeClass('element-invisible');
            uploader.refresh();
            break;

          case 'uploading':
            $('#' + vm.filePicker2Id).addClass('element-invisible');
            $progress.show();
            $upload.text('暂停上传');
            break;

          case 'paused':
            $progress.show();
            $upload.text('继续上传');
            break;

          case 'confirm':
            $progress.hide();
            $upload.text('开始上传').addClass('disabled');

            stats = uploader.getStats();
            if (stats.successNum && !stats.uploadFailNum) {
              setState('finish');
              return;
            }
            break;
          case 'finish':
            stats = uploader.getStats();
            if (stats.successNum) {
              fileCount = 0;
              percentages = [];
              $upload.removeClass("disabled");
              $queue.empty();
              updateTotalProgress();
              $placeHolder.removeClass('element-invisible');
              $queue.parent().removeClass('filled');
              $queue.hide();
              $statusBar.addClass('element-invisible');
              uploader.refresh();

              vm.$emit('finish');
              // alert( '上传成功' );
            } else {
              // 没有成功的图片，重设
              state = 'done';
              location.reload();
            }
            break;
        }

        updateStatus();
      }

      uploader.onUploadProgress = function (file, percentage) {
        var $li = $('#' + file.id),
          $percent = $li.find('.progress span');

        $percent.css('width', percentage * 100 + '%');
        percentages[file.id][1] = percentage;
        updateTotalProgress();
      };

      uploader.onFileQueued = function (file) {
        fileCount++;
        fileSize += file.size;

        if (fileCount === 1) {
          $placeHolder.addClass('element-invisible');
          $statusBar.show();
        }

        addFile(file);
        setState('ready');
        updateTotalProgress();
      };

      uploader.onFileDequeued = function (file) {
        fileCount--;
        fileSize -= file.size;

        if (!fileCount) {
          setState('pedding');
        }

        removeFile(file);
        updateTotalProgress();

      };
      uploader.on('uploadSuccess', function (file, response) {
        // all_files.push(response.data);
      });

      uploader.on('uploadBeforeSend', function (obj, data, headers) {
        $.extend(headers, {
          "Authorization": "Bearer " + vm.token
        });
      });

      uploader.on('all', function (type) {
        var stats;
        switch (type) {
          case 'uploadFinished':
            setState('confirm');
            break;

          case 'startUpload':
            setState('uploading');
            break;

          case 'stopUpload':
            setState('paused');
            break;

        }
      });

      uploader.onError = function (code) {
        vm.$message.error("上传失败，请重试！");
      };

      $upload.on('click', function () {
        if ($(this).hasClass('disabled')) {
          return false;
        }

        if (state === 'ready') {
          uploader.upload();
        } else if (state === 'paused') {
          uploader.upload();
        } else if (state === 'uploading') {
          uploader.stop();
        }
      });

      $info.on('click', '.retry', function () {
        uploader.retry();
      });

      $info.on('click', '.ignore', function () {
        // alert( 'todo' );
      });

      $upload.addClass('state-' + state);
      updateTotalProgress();


      this.uploader = uploader;
    },
  }
}
</script>
